<ion-menu [content]="content">
  <ion-content>
    <div class="user-box">
      <div>
        <img class="user-avatar"
             src="https://img01.sogoucdn.com/net/a/04/link?appid=100520040&url=https://i02picsos.sogoucdn.com/3c28af542f2d49f7-9e7c5d699eaea93e-0a4b5a105cb5f38d6fc747639ab29547_qq">
        <div class="user-nickname"><span class="user-nickname-text">游走走</span> <span class="user-level">Lv.9</span>
        </div>
      </div>
      <div class="sign-btn">签到</div>

    </div>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <img class="menu-item-icon" src="{{icon}}">{{p.title}}
      </button>
      <div class="menu-border"></div>
      <button menuClose ion-item *ngFor="let p of socialPages" (click)="openPage(p)">
        <img class="menu-item-icon" src="{{icon}}">{{p.title}}
      </button>
      <div class="menu-border"></div>
      <button menuClose ion-item *ngFor="let p of settingPages" (click)="openPage(p)">
        <img class="menu-item-icon" src="{{icon}}">{{p.title}}
      </button>
      <div class="bottom-tab-padding"></div>
    </ion-list>
    <div class="bottom-tab">
      <div><img class="tab-item-icon" src="{{icon}}">夜间模式</div>
      <div (click)="openPage(setPage)" menuClose><img class="tab-item-icon" src="{{icon}}">设置</div>
      <div><img class="tab-item-icon" src="{{icon}}">退出</div>
    </div>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
